<template>
  <el-dialog
    v-model="dialogVisible"
    title="用户审核"
    width="500px"
  >
    <el-descriptions :column="1" border>
      <el-descriptions-item label="账号">
        {{ user?.username }}
      </el-descriptions-item>
      <el-descriptions-item label="姓名">
        {{ user?.name }}
      </el-descriptions-item>
      <el-descriptions-item label="用户类型">
        <el-tag :type="user?.role === 'customer' ? '' : 'success'">
          {{ user?.role === 'customer' ? '客户' : '员工' }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="联系电话">
        {{ user?.phone }}
      </el-descriptions-item>
      <el-descriptions-item
        v-if="user?.role === 'customer'"
        label="公司名称"
      >
        {{ user?.company || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="注册时间">
        {{ formatDateTime(user?.createTime) }}
      </el-descriptions-item>
    </el-descriptions>

    <div class="review-form">
      <el-form :model="form" :rules="rules" ref="formRef">
        <el-form-item
          label="审核结果"
          prop="approved"
        >
          <el-radio-group v-model="form.approved">
            <el-radio :label="true">通过</el-radio>
            <el-radio :label="false">拒绝</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          v-if="!form.approved"
          label="拒绝原因"
          prop="comment"
        >
          <el-input
            v-model="form.comment"
            type="textarea"
            rows="3"
            placeholder="请输入拒绝原因"
          />
        </el-form-item>
      </el-form>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="submitting">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch } from 'vue'
import dayjs from 'dayjs'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  user: {
    type: Object,
    default: () => null
  }
})

const emit = defineEmits(['update:modelValue', 'submit'])

const dialogVisible = ref(false)
const submitting = ref(false)
const formRef = ref(null)

const form = ref({
  approved: true,
  comment: ''
})

const rules = {
  approved: [
    { required: true, message: '请选择审核结果' }
  ],
  comment: [
    { 
      required: true, 
      message: '请输入拒绝原因',
      trigger: 'blur',
      validator: (rule, value, callback) => {
        if (!form.value.approved && !value) {
          callback(new Error('请输入拒绝原因'))
        } else {
          callback()
        }
      }
    }
  ]
}

watch(() => props.modelValue, (val) => {
  dialogVisible.value = val
  if (val) {
    form.value = {
      approved: true,
      comment: ''
    }
  }
})

watch(dialogVisible, (val) => {
  emit('update:modelValue', val)
})

const formatDateTime = (datetime) => {
  return datetime ? dayjs(datetime).format('YYYY-MM-DD HH:mm:ss') : '-'
}

const handleSubmit = async () => {
  if (!formRef.value) return
  
  try {
    await formRef.value.validate()
    submitting.value = true
    emit('submit', {
      approved: form.value.approved,
      comment: form.value.approved ? '' : form.value.comment
    })
  } catch (error) {
    // 表单验证失败
  } finally {
    submitting.value = false
  }
}
</script>

<style scoped>
.review-form {
  margin-top: 20px;
  
  :deep(.el-form-item__label) {
    width: 80px;
  }
}

:deep(.el-descriptions__label) {
  width: 100px;
}
</style> 